import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSelector } from 'react-redux';

import FastImage from '@d11/react-native-fast-image';
import { t } from 'i18next';

import { useSubscriptionContext } from '../context/SubscriptionContext';
import useSubscribe from '../hook';
import { CustomerText } from '@/components/CustomerText/customerText';
import { PERMANENT_PRODUCT_ID, WEEKLY_PRODUCT_ID } from '@/constants';
import { RootState } from '@/stores/store';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

export const PriceList = () => {
  const { selectedPlanCode, handlePlanChange } = useSubscriptionContext();
  // const planList = useSelector(
  //   (state: RootState) => state.paywall.paywallProductDetailList,
  // );

  return (
    <>
      <View style={styles.content}>
        <Pressable
          style={styles.one_content}
          onPress={() => {
            handlePlanChange(PERMANENT_PRODUCT_ID);
          }}
        >
          <FastImage
            resizeMode="contain"
            style={styles.one_img}
            // source={
            //   selectedPlanCode == PERMANENT_PRODUCT_ID
            //     ? require('@assets/images/home/icon_pay_six_item_one_select.png')
            //     : require('@assets/images/home/icon_pay_six_item_one.png')
            // }
          />
          <CustomerText
            style={[
              styles.life_text,
              selectedPlanCode === PERMANENT_PRODUCT_ID && {
                color: 'rgba(255, 255, 255, 1)',
              },
            ]}
          >
            subscription.per.lifetime
          </CustomerText>
          <Text
            style={[
              styles.price_text,
              selectedPlanCode === PERMANENT_PRODUCT_ID && {
                color: 'rgba(0, 0, 0, 1)',
              },
            ]}
          >
            $ 3.99
            {/* {
              planList.filter(item => item.code?.includes('life'))[0].details
                .currency
            }{' '}
            {
              planList.filter(item => item.code?.includes('life'))[0].details
                .price
            } */}
          </Text>
          {/* <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            style={[
              styles.price_tip_text,
              selectedPlanCode == PERMANENT_PRODUCT_ID && {
                color: 'rgba(0, 0, 0, 1)',
              },
            ]}>
            {t('subscriptionSix.life.year')}
          </Text> */}
        </Pressable>
        <Pressable
          style={styles.two_content}
          onPress={() => {
            handlePlanChange(WEEKLY_PRODUCT_ID);
          }}
        >
          <FastImage
            resizeMode="contain"
            style={styles.two_img}
            // source={
            //   selectedPlanCode == WEEKLY_PRODUCT_ID
            //     ? require('@assets/images/home/icon_pay_six_item_two_select.png')
            //     : require('@assets/images/home/icon_pay_six_item_two.png')
            // }
          />
          <CustomerText
            style={[
              styles.life_text,
              selectedPlanCode === WEEKLY_PRODUCT_ID && {
                color: 'rgba(255, 255, 255, 1)',
              },
            ]}
          >
            subscriptionFour.price.weekly
          </CustomerText>
          <Text
            style={[
              styles.price_text,
              { left: pxToVw(72), bottom: pxToVh(42) },
              selectedPlanCode === WEEKLY_PRODUCT_ID && {
                color: 'rgba(0, 0, 0, 1)',
              },
            ]}
          >
            $ 39.99
            {/* {planList.filter((item) => item.code?.includes('week'))[0].details.currency}{' '}
            {planList.filter((item) => item.code?.includes('week'))[0].details.price} */}
          </Text>
          <CustomerText
            style={[
              styles.price_tip_text,
              { top: pxToVh(86), left: pxToVw(60), right: pxToVw(20) },
              selectedPlanCode === WEEKLY_PRODUCT_ID && {
                color: 'rgba(0, 0, 0, 1)',
              },
            ]}
          >
            subscriptionFour.first.week
          </CustomerText>
        </Pressable>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  content: {
    flexDirection: 'row',
    marginHorizontal: pxToVw(20),
    marginTop: pxToVh(30),
    // alignItems: 'center',
  },
  one_content: {
    height: pxToVh(130),
    width: pxToVw(180),
    marginRight: pxToVw(-20),
    marginLeft: pxToVw(-10),
  },
  two_content: {
    height: pxToVh(125),
    width: pxToVw(180),
    paddingLeft: pxToVw(12),
  },
  one_img: {
    width: pxToVw(230),
    height: pxToVh(140),
    position: 'absolute',
  },
  life_text: {
    fontWeight: '600',
    fontSize: pxToVw(18),
    color: 'rgba(255, 255, 255, 0.6)',
    // marginLeft: pxToVw(70),
    marginTop: pxToVh(3),
    textAlign: 'center',
    marginLeft: pxToVw(23),
  },
  price_text: {
    fontWeight: '600',
    fontSize: pxToVw(21),
    color: 'rgba(0, 0, 0, 0.6)',
    position: 'absolute',
    left: pxToVw(63),
    bottom: pxToVh(45),
  },
  price_tip_text: {
    fontWeight: '400',
    fontSize: pxToVw(9),
    color: 'rgba(0, 0, 0, 0.6)',
    position: 'absolute',
    left: pxToVw(55),
    top: pxToVh(90),
    height: pxToVh(30),
    right: pxToVw(30),
  },
  two_img: {
    width: pxToVw(220),
    height: pxToVh(125),
    position: 'absolute',
    // left: pxToVw(-10),
  },
});
